<template>
  <div v-for="(item, index) in mainList" :key="index" class="projects-list" @click="navigateTo(`/projects/${index}`)">
    <n-card :title="item.title" hoverable embedded>
      <template #header-extra>
        <n-tag type="success" v-if="item.type == 1"> 开源项目 </n-tag>
        <n-tag type="warning" v-if="item.type == 2"> 个人项目 </n-tag>
        <n-tag type="info" v-if="item.type == 3"> 练习项目 </n-tag>
      </template>

      <div class="text-[13px] my-[8px]">
        {{ item.describe }}
      </div>

      <template #footer>
        {{ item.points }}
      </template>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
let props = defineProps({
  mainList: {
    type: Array as any,
    default: [],
  },
});
</script>

<style scoped lang="less">
.projects-list {
  break-inside: avoid-column;
  margin-bottom: 10px;
  opacity: 0.9;
}

.projects-list:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  opacity: 1;
}
</style>
